import React, { useState, useEffect, useRef, memo } from 'react';
import styles from '../index.mod.less';
import { connect, useSelector, useDispatch } from 'umi';
import kls from 'classnames';
import { Progress } from 'antd';

export default function Panel2() {
  const dispatch = useDispatch();
  const companyList = useSelector(s => s.kanban.companyList);
  const projList = useSelector(s => s.kanban.projList);
  const curCompany = useSelector(s => s.kanban.curCompany);

  function handleItemClick(item) {
    let companyName = item.companyName === curCompany ? '' : item.companyName;
    dispatch({
      type: 'kanban/setCurCompany',
      payload: {
        curCompany: companyName,
      },
    });
    if (!companyName) {
      clearHighlight();
    }
  }

  // 清楚高亮
  function clearHighlight() {
    dispatch({
      type: 'kanban/setHighlight',
      payload: {
        key: 'name',
        value: '',
      },
    });
  }

  return (
    <div className={styles.itemType}>
      <div className={styles.itemTypeTitle}>
        <div
          className={styles.title}
          onClick={() => {
            clearHighlight();
            dispatch({
              type: 'kanban/updateState',
              payload: {
                curCompany: '',
              },
            });
          }}
        >
          项目总数
        </div>
        <span>{projList.length}个</span>
      </div>
      <div className={styles.list3}>
        {companyList.map((item, i) => {
          const [finishedNum, totalNum] = item.projects.reduce(
            (r, { projectStatus }) => {
              if (projectStatus == '已完成') {
                r[0] += 1;
              }
              r[1] += 1;
              return r;
            },
            [0, 0],
          );
          return (
            <div
              key={item.id}
              className={kls(styles.list3Item, {
                [styles.list3ItemActive]: curCompany === item.companyName,
              })}
              title={`已完成: ${finishedNum}总共: ${totalNum}`}
              onClick={() => {
                handleItemClick(item);
              }}
            >
              <p>{item.companyName}</p>
              <Progress
                percent={(100 * finishedNum) / totalNum}
                showInfo={false}
                style={{ marginBottom: 14 }}
                strokeColor={'#2fb0ff'}
                trailColor={'rgba(255,255,255,0.2)'}
              />
              <span>{item.projectCount}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}
